<template>
	<view class="report_content">
		<view class="report">
			<u-steps activeColor="#ECB066" :current="workState" direction="column">
				<u-steps-item class="report_step" iconSize="60">
					<view slot="desc" class="step_t">您的申请正在审核中</view>
					<view slot="desc"  class="step_tt">请静待客服联系您~</view>
				</u-steps-item>


				<u-steps-item class="report_step">
					<view slot="desc" class="desc">
						<view v-if="workOrderType == '2'" class="step_t">您的检测正在处理中</view>
						<view v-if="workOrderType == '3'" class="step_t">您申请的服务正在处理中</view>
						<view v-if="workOrderType == '5'" class="step_t">您的权益正在使用中</view>
					</view>
				</u-steps-item>

				<u-steps-item class="report_step">
					<view slot="desc" class="desc">
						<view v-if="workOrderType == '2' || workOrderType == '5'" class="step_t">您的检测已完成！</view>
						<view v-if="workOrderType == '3'" class="step_t">您的申请已完成！</view>
						<view class="step_three" v-if="workOrderType == '2' || workOrderType == '5'" @click="toShifeng()">
							<img class="three_img"
								src="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/11/23/10b87203494b42d08749fcfa50c2b452.png"
								alt="">
							<u-icon space="6rpx" labelColor="#FE9A1F" labelSize="34rpx" label="查看报告" labelPos="left" name="arrow-right" size="20" color="#FE9A1F" />
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				workState: '2',
				workOrderType: ''
			};
		},
		computed: mapGetters(["userInfo"]),
		onLoad(options) {
			this.workOrderType = options.workOrderType
		},
		methods: {
			toShifeng() {
				uni.navigateTo({
				    url: `/pages_my/health_records/index?customerPhone=${this.userInfo.mobile}`,
				});
				//跳转页面覆盖当前页面
				// window.location.href = 'http://app.oneredhealth.com/#/pages/report/index'
			}
		}
	};
</script>

<style scoped>
	.desc{
		height: 200rpx;
		text-align: left;
	}

	.report_content {
		height: 100%;
		box-sizing: border-box;
		background: #F6F7FB;
		padding: 1.375rem .875rem;
		text-align: center;
	}

	.report {
		background: #fff;
		border-radius: .625rem;
		padding: .875rem;
	}

	.report_step {
		height: 6.875rem;
		padding: .75rem 0 0 1rem;
		text-align: left;
		font-size: 1.125rem;
		font-weight: 500;
	}

	.report_step_four {
		min-height: 1.875rem;
		max-height: 5rem;
	}
	.step_three {
		margin-top: .75rem;
		width: 16.875rem;
		height: 4.9375rem;
		background: rgba(251, 222, 174, 0.1);
		border-radius: .625rem;
		display: flex;
		align-items: center;
		justify-content: end;
		padding-left: 100rpx;
		font-size: 1rem;
		font-weight: 500;
	}
	.three_img {
		width: 3.5rem;
		height: 3.5rem;
		margin-right: 2.875rem;
	}

	.step_t {
		color: #333333;
		text-align: left;
	}

	.step_tt {
		height: 200rpx;
		margin-top: .375rem;
		font-size: 0.875rem;
		font-weight: 500;
		color: #FEA83B;
		text-align: left;
	}
</style>